<template>
  <div class="content-container">
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      	<div class="tools-left f-l">
      		
      		<el-button-group>
			       <el-button type="primary" @click="handleAdd">新增摄像头</el-button>
			   </el-button-group>

      	</div>
      	<div class="tools-right f-r">
      		
			      <div class="search-wrap" style="display: inline-block;">
              <el-input placeholder="请输入关键词" v-model="keywords">
                <template slot="append">
                  <i class="icon el-icon-search"></i>
                </template>
              </el-input>
            </div>
			
      	</div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn" :style="{height:ResultHeight+'px'}">
    	<el-table
        border
        v-if="data"
        size="small"
        :data="data"
        :height.sync="tableHeight"
        :header-cell-style="{background:'#42b983',color:'#ffffff'}"
        :cell-style="{borderWidth:0}"
        style="width: 100%"
      >
    		<el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="150">
        </el-table-column>

    		<el-table-column
		      fixed
		      prop="name"
		      label="名称"
		      min-width="150">
		    </el-table-column>

		    <el-table-column
		      prop="code"
		      label="验证码"
		      width="200">
		    </el-table-column>

		    <el-table-column
		      prop="serialNum"
		      label="序列号"
		      width="200">
		    </el-table-column>

        
		    <el-table-column
          class="oprate"
		    	fixed="right"
		      label="操作"
          width="280"
		    >

		      <template slot-scope="scope">
            <el-button-group>
              <el-button type="primary" size="mini" icon="el-icon-lock"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-video-camera"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-delete"></el-button>
            </el-button-group>
		      	

		      </template>

		    </el-table-column>

    	</el-table> 

      <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
            background
            :current-page="page.currentPage"
            :page-sizes="pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div> 
    </div>

    <!-- 修改dialog -->
    <camera-edit-dialog
    	:visible="editDialogVisible"
    	:form.sync='editForm'
      :type="editType"
    	@cancel="editDialogCancel"
      @confirm="editDialogConfirm"
    ></camera-edit-dialog>

    <!-- 分配权限 -->
    <auth-assign
      :visible="authVisible"
      :menuIds="menuIds"
      :form.sync="authForm"
      @close="authDialogClose"
      @confirm="handleSetRoles"
    ></auth-assign>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'

import {
  getList,
  getRole,
  remove,
  update,
  add,
  setMenu,
} from "@/api/admin/roles";

import cameraEditDialog from '@/components/agriculture/equipment/cameraEditDialog.vue'  
import AuthAssign from '@/components/Dialog/authAssign'

import adminMixins from "@/mixins/admin"
export default {
  name: 'role',
  mixins:[adminMixins],
  components:{
  	cameraEditDialog,
    AuthAssign
  },
  computed: {
    ...mapGetters([
      'name',
      'permission',
      'userInfo'
    ])
  },
  data(){
  	return{
      keywords:'',
      //1新增，2修改
      editType:1,
      loading:true,
  		authForm:{},
  		//修改模态框的显示隐藏
  		editDialogVisible:false,
      authVisible:false,
      menuIds: [],
  		data:null,
      testData:[
        {
          id:"179",
          name:"小麦摄像头",
          code:'C755986003',
          serialNum:'C7699948773',
        }
      ],
  		page: {
    	  pageSize: 10,
    	  currentPage: 1,
    	  total: 0
  	  },
  	  pageSizes:[10,20,30,40,50,100],
  	  editForm:null
  	}
  },
  mounted(){
    //设置dom尺寸
    this.setSize();
  	this.loadData(this.page)
  },
  methods:{
  	//请求table数据
  	loadData(page, params = {}){
  		  this.loading = true;
      	getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {

      		console.log("---views/admin/menu--loadData----------")
      		console.log(res)
        	this.loading = false;
        	//this.data = this.reviseData(res.data.data);
          this.data = this.testData;
      	});
      	
  	},
    reviseData(data){
      var key = 'children';
      var arr = data.slice();

      function toParse(arr){
        arr.forEach(function(item){
          if(item.childrenNodes && Array.isArray(item.childrenNodes)){
            item[key] = item.childrenNodes;
            toParse(item[key])
          }
          delete item.childrenNodes
        })

        return arr;
      }

      return toParse(arr)
    },


  	//转换账号状态
  	convertStatus(status){
  		if(status == 'ENABLE'){
  			return true
  		}else if(status == 'UNENABLE'){
  			return false
  		}else{
  			return false
  		}
  	},
    //新增用户
    handleAdd(){
        this.editForm = null;
        this.editType = 1;
        //模态框显示
        this.editDialogVisible = true;
    },
    //刷新当前页
    refresh(){
      this.loadData(this.page)
    },
  	//点击操作的编辑
  	handleEdit(index,row){
  		//获取当前修改菜单的信息，赋值给editForm
      getRole(row.roleId).then((res)=>{
          console.log("------获取角色-------")
          console.log(res.data.data)

          this.editType = 2;
          this.editForm = res.data.data;
          //模态框显示
          this.editDialogVisible = true;
      })
      
  	},
  	//点击操作的删除
  	handleDel(index,row){
  		console.log(row)

  		this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          	confirmButtonText: '确定',
          	cancelButtonText: '取消',
          	type: 'warning'
        }).then(()=>{
        	return remove(row.roleId);
        }).then((res) => {

        	this.loadData(this.page)
          	this.$message({
            	type: 'success',
            	message: '删除成功!'
          	});
        }).catch(() => {
          	this.$message({
            	type: 'info',
            	message: '已取消删除'
          	});          
        });
  	},
  	//分配权限
  	handleRoles(index,row){
  		this.authForm = row;
      getRole(this.authForm.roleId).then(res => {
        console.log("------获取角色权限---------")
        this.authForm = res.data.data;
        this.authForm.menuId = this.authForm.menuIds || '';
        this.menuIds = this.authForm.menuIds;
        this.authVisible = true;
      });
  	},
    handleSetRoles (data) {
      setMenu(data.roleId,data.menuId).then(() => {
        this.$message.success('设置成功');
        this.menuIds = [];
        this.authVisible = false;
        this.loadData(this.page);
        this.authForm = {};
      })
    },
  	editDialogCancel(){
  		this.editDialogVisible = false;
  		this.editForm = null;
  	},
    editDialogConfirm(form){
      this.editDialogVisible = false;

      if(form.type == 1){

        add(form.data).then((res)=>{

          //this.editDialogVisible = false;
          this.loadData(this.page)
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
        })

      }else if(form.type == 2){

        update(form.data).then((res)=>{

          
              this.loadData(this.page)
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
        })
      }
    },
    //权限模态框关闭
    authDialogClose(){
      this.menuIds = [];
      this.authVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
    .cell{
      .icon{
        margin-right: 10px;
      }
    }
  }
  /***分页***/
  &-pagination-wrap{
    text-align: right;
  	padding-top: 15px;
  }
}
</style>
